<!-- vue模板 -->
<template>
  <div class="user-management">
    <div class="search-bar">
      商品编码:<el-input
        placeholder="请输入"
        v-model="restockingCode"
        class="search-input"
      />
        商品名称:<el-input
        placeholder="请输入"
        v-model="name"
        class="search-input"
      />
      <!-- 状态选择下拉框 -->
      门店：<el-select v-model="stores" placeholder="选择门店" class="status-select">
        <el-option label="全部" :value="''"></el-option>
        <el-option label="北京朝阳店" value="北京朝阳店"></el-option>
        <el-option label="上海浦东店" value="上海浦东店"></el-option>
        <el-option label="广州天河店" value="广州天河店"></el-option>
      </el-select>
      <!--查询条件-->
      <el-button type="primary" icon="el-icon-search" @click="init">查询</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" class="user-table">
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column prop="code" label="补货单号" width="180"></el-table-column>
      <el-table-column prop="replenishmentTime" label="补货时间" width="180"></el-table-column>
      <el-table-column label="操作" width="260">
           <template #default="{ row }">
          <el-button-group class="action-btn-group">
            <el-button @click="detail(row)" size="small" class="action-btn">详情</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="page"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      layout="prev, pager, next, jumper, ->, total"
      class="pagination"
    />
    <!-- 重置密码弹窗 -->
  </div>
</template>

<!-- 组件逻辑-->
<script setup>
import {useRouter} from "vue-router";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { queryReplenishment } from "@/api/allocate/allocate.js";
const router = useRouter();
const tableData = ref([]); //表格数据
const page = ref(1);
const pageSize = ref(4);
const total = ref(0);
const restockingCode = ref(""); //商品编码
const name = ref(""); //商品名称
const stores = ref(""); //门店
// 查询数据
async function init() {
    let queryParams = {
        page: page.value,
        pageSize: pageSize.value
    };
     if (stores.value && stores.value.trim() !== "") {
        queryParams.stores = stores.value.trim();
    }
    if (name.value !== "" && name.value !== null && name.value !== undefined) {
        queryParams.name = name.value;
    }
    if (restockingCode.value !== "" && restockingCode.value !== null && restockingCode.value !== undefined) {
        queryParams.restockingCode = restockingCode.value;
    }
    console.log('查询参数:', queryParams);
    let res = await queryReplenishment(queryParams);
    console.log('接口返回：', res);
    if(res.code==200){
        tableData.value = res.data.list;
        total.value = res.data.total;
        console.log("补货单详情:", JSON.parse(JSON.stringify(tableData.value)));
    }
}

//跳转补货详情
const detail = (row) => {
  router.push({
    path: "/allocate/restockingDetail",
    query: { 
      id: row.id,
    },
  });
};

//生命周期初始化
onMounted(() => {
    init();
});


// 处理分页变化
const handleCurrentChange = (newPage) => {
  page.value = newPage;
  init();
};



</script>

<!-- 组件样式 -->
<style scoped>


.user-management {
  margin: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.search-input {
  margin-right: 10px;
  width: 250px;                                  
}

.status-select {
  margin-left: 10px;
  width: 150px;
}

.el-button {
  margin-left: 10px;
}

.user-table {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-table th {
  background-color: #f5f7fa;
  color: #333;
  font-weight: bold;
}

.el-table-column {
  text-align: center;
}

.el-button {
  font-size: 14px;
  padding: 6px 12px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.action-btn-group {
  display: flex;
  justify-content: center; /* 可改为flex-start左对齐 */
  align-items: center;
  gap: 8px;
}

.action-btn {
  min-width: 70px;
  flex: 1 1 0;
  text-align: center;
  padding: 6px 0;
}
</style>